<template>
    <div>
        <NavBar />
        <div class="Register-container">
            <!-- 背景图片 -->
            <div class="background-image"></div>

            <!-- 登录面板 -->
            <div class="Register-panel">
                <h2>Seller Register</h2>
                <form @submit.prevent="handleRegister">
                    
                    <!-- 商家账号输入 -->
                    <div class="form-group">
                        <label for="username">username</label>
                        <input type="text" id="username" v-model="RegisterForm.username"
                            placeholder="Enter your sellername" required />
                    </div>

                    <!-- 密码输入 -->
                    <div class="form-group">
                        <label for="password">password</label>
                        <input type="password" id="password" v-model="RegisterForm.password"
                            placeholder="Enter your password" required />
                    </div>
                    <!-- 商家名称输入 -->
                    <div class="form-group">
                        <label for="nickname">nickname</label>
                        <input type="text" id="nickname" v-model="RegisterForm.nickname"
                            placeholder="Enter your nickname" required />
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn">Register</button>
                </form>


                <!-- 错误提示 -->
                <div v-if="errorMessage" class="error-message">
                    {{ errorMessage }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { register } from '../api/auth';
import { setToken } from '../utils/auth';

export default {
    name: 'MerchantLoginPanel',
    components: {
        NavBar,
    },
    setup() {
        const router = useRouter();
        const RegisterForm = ref({
            username: '',
            password: '',
            nickname: '',
        });
        const errorMessage = ref('');

        const handleRegister = async () => {
            const { username, password,nickname, } = RegisterForm.value;

            if (!username || !password||!nickname) {
                errorMessage.value = 'Please fill in all fields.';
                return;
            }

            try {
                const role = 'seller'; // Changed from 'user' to 'seller'
                const response = await register(username, password,nickname, role);

                if (response.data.code === 200) {
                    const token = response.token; // Assuming token is in response.data
                    setToken(token);
                    alert(`Register successful! Welcome, ${username}.`);
                    console.log('Token received:', token);
                    router.push({ name: 'sellerLogin' }); // Changed from 'userView' to 'sellerView'
                } else {
                    errorMessage.value = response.msg || 'Register failed. Please try again.';
                }
            } catch (error) {
                console.error('Register failed:', error);
                errorMessage.value = 'Register failed. Please try again.';
            }
        };

        return {
            RegisterForm,
            errorMessage,
            handleRegister,
        };
    },
};
</script>

<style scoped>
.Register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/image1.png');
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: -1;
}

.Register-panel {
    max-width: 400px;
    width: 100%;
    padding: 30px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Register-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
    font-weight: 600;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 14px;
}

input {
    width: 95%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
    border-color: #42b983;
    box-shadow: 0 0 8px rgba(66, 185, 131, 0.3);
    outline: none;
}

.btn {
    width: 100%;
    padding: 12px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #369f6e;
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.error-message {
    margin-top: 15px;
    color: #ff4d4f;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.register-option {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    color: #555;
}

.register-option a {
    color: #42b983;
    text-decoration: none;
    font-weight: 600;
}

.register-option a:hover {
    text-decoration: underline;
}
</style>